<template>
	<!-- 车辆详情 -->
	<view class="container" v-if="isloding">
		<view class="top">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="imgs in info.type.carousel" :key="imgs.id">
					<view class="swiper-item">
						<image :src="imgs" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="tips">
				*图片，尺寸仅供参考，以实际接单车辆为准
			</view>
		</view>
		<view class="bottom">
			<view class="title">
				载货空间及重量
			</view>
			<view class="text">
				载货吨位:{{info.type.parameter.tonnage}}
			</view>
			<view class="text">
				车辆尺寸:{{info.type.parameter.size}}
			</view>
			<view class="text">
				吊重吨位:{{info.type.parameter.load}}
			</view>
			<view class="text">
				臂展长度:{{info.type.parameter.arm_length}}
			</view>
			<view class="text">
				货箱体积:{{info.type.parameter.container_volume}}
			</view>
			<view class="text">
				载货空间:{{info.type.parameter.cargo_space}}
			</view>
			<view class="text">
				应用场景介绍:{{info.type.parameter.introduce}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				isloding:false
			};
		},
		onLoad(e) {
			// console.log(e)
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.request({
				url: this.webUrl+'/user/index/read',
				method: 'GET',
				data: {
					id:e.id,
					type:e.typeId
				},
				success: res => {
					uni.hideLoading()
					if(res.data.code==0){
						this.info=res.data.data
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
					this.isloding=true
					// console.log(res)
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
				complete: () => {}
			});
			if(e.type==1){
				uni.setNavigationBarTitle({
				    title: '吊运详情'
				});
			}else if(e.type==2){
				uni.setNavigationBarTitle({
				    title: '道路救援详情'
				});
			}else if(e.type==3){
				uni.setNavigationBarTitle({
				    title: '高空作业详情'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #F2F2F2;
		.top{
			background:rgba(255,255,255,1);
			border-radius:0upx 0upx 30upx 30upx;
			image{
				border-top: 2upx solid #EDEDED;
				margin: 0 30upx;
				height: 240upx;
				width: 582upx;
				padding: 14upx 54upx;
			}
			.tips{
				margin-left: 80upx;
				margin-top: 14upx;
				padding-bottom: 20upx;
				font-size:20upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(102,102,102,1);
			}
		}
		.bottom{
			margin-top: 30upx;
			padding-bottom: 30upx;
			background:rgba(255,255,255,1);
			border-radius:30upx;
			.title{
				margin-bottom: 30upx;
				width:686upx;
				height:60upx;
				line-height: 60upx;
				padding-left: 30upx;
				background:rgba(254,86,33,1);
				border-radius:0upx 30upx 30upx 0upx;
				font-size:30upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(255,254,254,1);
			}
			.text{
				font-size:30upx;
				margin-top: 20upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(52,52,52,1);
				// padding: 10upx;
				margin-left: 30upx;
			}
		}
	}
</style>
